<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
    ${demo.css}
</style>
<script type="text/javascript">
    $(function () {

        /**
         * Get the current time
         */
        function getNow() {
            var now = new Date();

            return {
                hours: now.getHours() + now.getMinutes() / 60,
                minutes: now.getMinutes() * 12 / 60 + now.getSeconds() * 12 / 3600,
                seconds: now.getSeconds() * 12 / 60
            };
        }

        /**
         * Pad numbers
         */
        function pad(number, length) {
            // Create an array of the remaining length + 1 and join it with 0's
            return new Array((length || 2) + 1 - String(number).length).join(0) + number;
        }

        var now = getNow();

        // Create the chart
        $('#container').highcharts({

                    chart: {
                        type: 'gauge',
                        plotBackgroundColor: null,
                        plotBackgroundImage: null,
                        plotBorderWidth: 0,
                        plotShadow: false,
                        height: 200
                    },

                    credits: {
                        enabled: false
                    },

                    title: {
                        text: 'The Highcharts clock'
                    },

                    pane: {
                        background: [
                            {
                                // default background
                            },
                            {
                                // reflex for supported browsers
                                backgroundColor: Highcharts.svg ? {
                                    radialGradient: {
                                        cx: 0.5,
                                        cy: -0.4,
                                        r: 1.9
                                    },
                                    stops: [
                                        [0.5, 'rgba(255, 255, 255, 0.2)'],
                                        [0.5, 'rgba(200, 200, 200, 0.2)']
                                    ]
                                } : null
                            }
                        ]
                    },

                    yAxis: {
                        labels: {
                            distance: -20
                        },
                        min: 0,
                        max: 12,
                        lineWidth: 0,
                        showFirstLabel: false,

                        minorTickInterval: 'auto',
                        minorTickWidth: 1,
                        minorTickLength: 5,
                        minorTickPosition: 'inside',
                        minorGridLineWidth: 0,
                        minorTickColor: '#666',

                        tickInterval: 1,
                        tickWidth: 2,
                        tickPosition: 'inside',
                        tickLength: 10,
                        tickColor: '#666',
                        title: {
                            text: 'Powered by<br/>Highcharts',
                            style: {
                                color: '#BBB',
                                fontWeight: 'normal',
                                fontSize: '8px',
                                lineHeight: '10px'
                            },
                            y: 10
                        }
                    },

                    tooltip: {
                        formatter: function () {
                            return this.series.chart.tooltipText;
                        }
                    },

                    series: [
                        {
                            data: [
                                {
                                    id: 'hour',
                                    y: now.hours,
                                    dial: {
                                        radius: '60%',
                                        baseWidth: 4,
                                        baseLength: '95%',
                                        rearLength: 0
                                    }
                                },
                                {
                                    id: 'minute',
                                    y: now.minutes,
                                    dial: {
                                        baseLength: '95%',
                                        rearLength: 0
                                    }
                                },
                                {
                                    id: 'second',
                                    y: now.seconds,
                                    dial: {
                                        radius: '100%',
                                        baseWidth: 1,
                                        rearLength: '20%'
                                    }
                                }
                            ],
                            animation: false,
                            dataLabels: {
                                enabled: false
                            }
                        }
                    ]
                },

                // Move
                function (chart) {
                    setInterval(function () {

                        now = getNow();

                        var hour = chart.get('hour'),
                                minute = chart.get('minute'),
                                second = chart.get('second'),
                        // run animation unless we're wrapping around from 59 to 0
                                animation = now.seconds === 0 ?
                                        false :
                                {
                                    easing: 'easeOutElastic'
                                };

                        // Cache the tooltip text
                        chart.tooltipText =
                                pad(Math.floor(now.hours), 2) + ':' +
                                        pad(Math.floor(now.minutes * 5), 2) + ':' +
                                        pad(now.seconds * 5, 2);

                        hour.update(now.hours, true, animation);
                        minute.update(now.minutes, true, animation);
                        second.update(now.seconds, true, animation);

                    }, 1000);

                });
    });

    // Extend jQuery with some easing (copied from jQuery UI)
    $.extend($.easing, {
        easeOutElastic: function (x, t, b, c, d) {
            var s = 1.70158;
            var p = 0;
            var a = c;
            if (t == 0) return b;
            if ((t /= d) == 1) return b + c;
            if (!p) p = d * .3;
            if (a < Math.abs(c)) {
                a = c;
                var s = p / 4;
            }
            else var s = p / (2 * Math.PI) * Math.asin(c / a);
            return a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b;
        }
    });
</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>

<div id="container" style="width: 300px; height: 300px; margin: 0 auto"></div>

</body>
</html>
